import React, { Component } from 'react';
import styles from './index.css';
import { connect } from 'dva'; //使用
import { Button, Card, Input } from 'antd'; // 按需加载
@connect(
  state => ({
    goodsList: state.goods,
    loading: state.loading, //通过loading命名空间拿到我们加载状态
  }), //获取指定的命名空间的state
  {
    getList: () => ({ type: 'goods/getList' }),
    addGoods: title => ({ type: 'goods/addGood', payload: { title } }),
  }, //action的type是需要命名空间为前缀
)
export default class Goods extends Component {
  componentDidMount() {
    this.props.getList();
  }
  state = {
    title: null,
  };
  addGoods() {
    this.props.addGoods(this.state.title);
  }
  changeTitle(e) {
    //数据双向绑定
    this.setState(
      {
        title: e.target.value,
      },
      () => {},
    );
  }
  render() {
    if (this.props.loading.models.goods) {
      //指定到models中某个状态
      return <div>加载中...</div>;
    }
    return (
      <div>
        <h1 className={styles.title}>商品主页</h1>
        {this.props.goodsList.map((v, i) => {
          return (
            <Card key={i} title={`课程${v.title}`} style={{ width: 300 }}>
              <p>{v.title}</p>
            </Card>
          );
        })}
        <Input
          style={{ width: 300 }}
          onChange={e => this.changeTitle(e)}
          value={this.state.title}
          placeholder="输入标题"
        />
        <Button onClick={() => this.addGoods()}>添加</Button>
      </div>
    );
  }
}
